---
title: Using component types
description: Guidelines on how to use and make the most out of exported component types in Typescript.
redirect_from:
  - /guides/using-component-types/
---

In `Orbit`, all components export their `Props` object
so you can then import it into your project and use it to access their fields.

A common use case is to be able type the different `enums` that `Orbit` has,
such as `alignment` for Popover and `weight` for Text.

In the following snippet (using `Typescript`),
the type checker complains because `type` isn't the `enum` type but a general `string` type.

```jsx
import Text from "@kiwicom/orbit-components/lib/Text";

interface Props {
  type: string;
}

const WrappedText = ({ children, type }) => <Text type={type}>{children}</Text>;

export default WrappedText;
```

To solve this, you need to have a way to access the different `Props` fields
to correctly type the fields that are passed on to `Orbit` components.
Fortunately, there is a way to do so with the different type-checking systems.

## Typescript

In `Typescript`,
you can access the fields using [index types](https://www.typescriptlang.org/docs/handbook/advanced-types.html#index-types).
For example, a type that contains `field_name` from a given `TypeName`
would be `TypeName["field_name"]`,
so the issue above could be solved by modifying the prop's type:

```jsx
import Text, { Props as TextProps } from "@kiwicom/orbit-components/lib/Text";

interface Props {
  type: TextProps["type"];
}

const WrappedText = ({ children, type }) => <Text type={type}>{children}</Text>;

export default WrappedText;
```
